<template>
	<view class="content">
		<!-- <u-transition :show=""> -->
		<view class="tabs" v-if="tabsShow">
			<u-icon name="arrow-left" size="28" @click="jumpHome"></u-icon>
			<u-tabs :list="toptabsData" lineWidth="40" lineColor="#f56c6c" :activeStyle="{
						fontSize:'35rpx',
			            color: 'red',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
						fontSize:'35rpx',
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="tabschange">
			</u-tabs>
		</view>
		<!-- </u-transition> -->
		<view class="carousel">
			<u-swiper height="450" :list="productDetailsData" @change="e => currentNum = e.current" :autoplay="false"
				indicatorStyle="right: 20px" circular>
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum +1 }}/{{ productDetailsData.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="product-information">
			<view class="commodity-price">
				<view class="current">
					<text class="now-price">￥<text class="price-discount">50</text></text>
					<text class="original-price">￥50</text>
					<view class="member-price">
						<view class="member">会员价</view>
						<text class="price">￥50</text>
					</view>
				</view>
				<view class="share">
					<u-icon name="share" size="28"></u-icon>
					<text>分享</text>
				</view>
			</view>
			<view class="">
				<view class="">
					<view class="commodity-name">
						1000克
					</view>
					<view class="sales">
						<text>销量:98</text>
						<text class="views">浏览量:78</text>
					</view>
				</view>
			</view>
		</view>
		<view class="product-type">
			<view class="type-font">
				<view class="selected">已选</view>
				<view class="model">黑色,m</view>
			</view>
			<view class="produet-type-icon">
				<u-icon class="icon" name="arrow-right" color="black" size="20"></u-icon>
			</view>
		</view>
		<view class="appraise">
			<view class="appraise-top">
				<view class="">
					<text class="user-appraise">用户评价</text>
					<text class="positive-rating">好评率0%</text>
				</view>
				<view class="review-all">
					<text>查看全部</text>
					<u-icon class="icon" name="arrow-right" color="black" size="20"></u-icon>
				</view>
			</view>
			<u-line color="#ccc"></u-line>
			<view class="appraise-bottom">
				<view class="bottom-user">
					<u-icon name="account" size="28"></u-icon>
					<text>用户60837221</text>
				</view>
				<view class="">
					<view class="user-time">
						2024-06-14 18:14:05
					</view>
					<view class="">
						垃圾
					</view>
				</view>
			</view>
		</view>
		<view class="shop">
			<view class="shopkeeper">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" class="shop-image" mode=""></image>
				<view class="keeper">
					<view class="keeper-name">1</view>
					<view class="">在售商品 1件</view>
				</view>
			</view>
			<view class="">
				<button class="shop-button" @click="jumpStore">进入店铺</button>
			</view>
		</view>
		<view class="product-details">
			<view class="details">商品详情</view>
			<view>测试</view>
			<image src="https://cdn.uviewui.com/uview/swiper/swiper2.png" class="details-image" mode=""></image>
		</view>
		<view class="bottom">
			<view class="bottom-function" v-for="(item,index) in bottomBarData" :key="index" @click="navigationBar(item,index)">
				<image :src="item.src" mode="" class="bottom-image"></image>
				<view>{{ item.name }}</view>
			</view>
			<button class="shopping-button">加入购物车</button>
			<button class="buy-now-button">立即购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsShow: false,
				// 
				toptabsData: [{
					name: '商品',
				}, {
					name: '评价',
				}, {
					name: '详情'
				}],
				// 轮播图右下角页数变量
				currentNum: 0,
				// 轮播图数据
				productDetailsData: [
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				bottomBarData: [{
						src: '/static/images/customer.png',
						name: '客服',
						url:'/pages/index/contactCustomerService/contactCustomerService'
					},
					{
						src: '/static/images/collection.png',
						name: '收藏',
					},
					{
						src: '/static/images/shopping.png',
						name: '购物车',
						url:'/pages/shoppingCart/shoppingCart'
					},
				],
			}
		},
		methods: {
			tabschange(e) {
				console.log(e);
				if (e.index == 0) {
					uni.pageScrollTo({
						scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
						duration: 300 // 滚动动画的时长
					})
				}
				if (e.index == 1) {
					uni.pageScrollTo({
						scrollTop: 500, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
						duration: 300 // 滚动动画的时长
					})
				}
				if (e.index == 2) {
					uni.pageScrollTo({
						scrollTop: 700, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
						duration: 300 // 滚动动画的时长
					})
				}


			},
			jumpStore() {
				uni.navigateTo({
					url: '/pages/index/storeDetails/storeDetails'
				})
			},
			// 导航栏跳转首页
			jumpHome(){
				wx.switchTab({
					url: '/pages/index/index'
				})
				console.log('asdasdsa')
			},
			// 底部功能跳转事件
			navigationBar(item,index){
				if(index == 0 || index == 2){
					uni.reLaunch({
						url:item.url
					})
				}else{
					
				}
			}
		},
		// 监听离顶部多远
		onPageScroll(e) {
			if (e.scrollTop == 0) {
				this.tabsShow = false
				console.log(e.scrollTop);
			} else {
				this.tabsShow = true
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F6F6F6;
	}

	.tabs {
		display: flex;
		align-items: center;
		position: fixed;
		top: -2rpx;
		z-index: 10000;
		background-color: #fff;
		width: 100%;
		padding: 20rpx;
	}

	.carousel {
		margin-top: 20rpx;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.product-information {
		width: 100%;
		background-color: #fff;
		padding: 20rpx 0rpx 20rpx 20rpx;
	}

	.commodity-price {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.current {
		display: flex;
		align-items: center;
	}

	.now-price {
		color: red;
	}

	.price-discount {
		font-size: 40rpx;
	}

	.original-price {
		text-decoration: line-through;
		color: #ccc;
	}

	.member-price {
		background-color: #FFE9BA;
		display: flex;
		margin-left: 50rpx;
	}

	.member {
		background-color: black;
		color: #FFCC22;
		text-align: center;
		padding: 10rpx 20rpx 10rpx 20rpx;
		font-size: 30rpx;
	}

	.price {
		padding: 10rpx 10rpx 10rpx 10rpx;
		font-size: 25rpx;

		width: 70rpx;
		position: relative;

		&::before,
		&::after {
			content: ' ';
			position: absolute;
		}

		&::after {
			top: 50%;
			left: -28rpx;
			transform: translate(50%, -50%);
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #FFE9BA;
		}
	}

	.share {
		width: 140rpx;
		display: flex;
		align-items: center;
		background-color: #F6F6F6;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}

	.commodity-name {
		margin-top: 20rpx;
		font-size: 45rpx;
	}

	.sales {
		margin-top: 30rpx;
		color: rgb(102, 102, 151);
		display: flex;
		justify-content: space-between;
	}

	.views {
		width: 160rpx;
		margin-right: 20rpx;
	}

	.product-type {
		width: 100%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 35rpx;
		padding: 20rpx 0rpx 20rpx 0rpx ;
		.produet-type-icon{
			margin-right: 20rpx;
		}
		.type-font {
			display: flex;
			align-items: center;
			margin-left: 20rpx;

			.selected {
				color: rgb(102, 102, 151);
				margin-right: 40rpx;
			}

		}
	}

	.appraise {
		background-color: #fff;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding-right: 20rpx;
	}

	.appraise-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
	}

	.user-appraise {
		font-size: 40rpx;
	}

	.positive-rating {
		font-size: 30rpx;
		margin-left: 10rpx;
		color: red;
	}

	.review-all {
		display: flex;
		align-items: center;
	}

	.appraise-bottom {
		padding: 20rpx 0rpx 20rpx 20rpx;
	}

	.bottom-user {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.user-time {
		color: #ccc;
		margin-bottom: 20rpx;
	}

	.shop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
	}

	.shopkeeper {
		display: flex;
		align-items: center;
	}

	.keeper {
		margin-left: 20rpx;
	}

	.keeper-name {
		font-size: 40rpx;
		font-weight: bold;
	}

	.shop-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}

	button::after {
		border: none;
	}

	button {
		padding-left: 20rpx;
		padding-right: 20rpx;
		text-align: center;
		line-height: 1.35;
		overflow: hidden;
		height: 100%;
	}

	.shop-button {
		border-radius: 40rpx;
		border: 1px solid red;
		color: red;
		padding: 5rpx 30rpx 5rpx 30rpx;
	}

	.product-details {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx 20rpx 20rpx 20rpx;
	}

	.details {
		font-size: 35rpx;
		text-align: center;
	}

	.details-image {
		width: 100%;
		height: 900rpx;
	}

	.bottom {
		width: 100%;
		background-color: #fff;
		padding: 10rpx 20rpx 20rpx 10rpx;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		align-items: center;
	}

	.bottom-function {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		width: 100rpx;
		margin-right: 10rpx;
	}

	.bottom-image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100%;
	}

	.shopping-button {
		width: 215rpx;
		background-color: rgb(255, 155, 48);
		border-radius: 40rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
		text-align: center;
		margin-left: -10rpx;
		color: #fff;
	}

	.buy-now-button {
		width: 180rpx;
		background-color: rgb(255, 44, 60);
		border-radius: 40rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
		text-align: center;
		margin-left: -10rpx;
		color: #fff;
	}
</style>